<!DOCTYPE html>
<html>

<head>
    <title>Custom Frame Rate Animation</title>
</head>

<body>
    <canvas width="1000" height="600"></canvas>
    <script>
        const canvasElem = document.querySelector('canvas')

        // 设置帧率
        const fps = 24

        const ctx = canvasElem.getContext('2d')


        const rectSize = 100
        function draw() {
            ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);

            // 画方形
            ctx.save();

            ctx.translate(200, 200)
            const time = new Date();
            ctx.rotate(
                (
                    ((2 * Math.PI) / 60) * time.getSeconds() +
                    ((2 * Math.PI) / 60000) * time.getMilliseconds()
                ) * 24,
            );
            ctx.fillStyle = '#ddd'
            ctx.fillRect(rectSize / -2, rectSize / -2, rectSize, rectSize)

            ctx.restore();
        }


        // window.requestAnimationFrame(draw);

        setInterval(() => {
            draw()
        }, 1000 / fps)
    </script>
</body>

</html>